<template>
  <div class="api-example">
    <el-card>
      <template #header>
        <h3>API调用示例</h3>
      </template>
      
      <!-- 用户信息展示 -->
      <div v-if="userInfo" class="user-info">
        <h4>用户信息</h4>
        <p>邮箱: {{ userInfo.email }}</p>
        <p>角色: {{ userInfo.role }}</p>
      </div>
      
      <!-- 操作按钮 -->
      <div class="actions">
        <el-button @click="getUserInfo" :loading="loading">
          获取用户信息
        </el-button>
        <el-button @click="updateUserInfo" :loading="updating">
          更新用户信息
        </el-button>
        <el-button @click="uploadFile" :loading="uploading">
          上传文件
        </el-button>
      </div>
      
      <!-- 消息列表 -->
      <div v-if="messages.length > 0" class="messages">
        <h4>消息列表</h4>
        <el-table :data="messages" style="width: 100%">
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="content" label="内容"></el-table-column>
          <el-table-column prop="createdAt" label="时间"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { userApi, messageApi, uploadApi } from '../../api';

export default {
  name: 'ApiExample',
  data() {
    return {
      userInfo: null,
      messages: [],
      loading: false,
      updating: false,
      uploading: false
    };
  },
  mounted() {
    // 组件挂载时获取用户信息
    this.getUserInfo();
    this.getMessages();
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      this.loading = true;
      try {
        const response = await userApi.getUserInfo();
        this.userInfo = response.data;
        this.$message.success('获取用户信息成功');
      } catch (error) {
        console.error('获取用户信息失败:', error);
        this.$message.error('获取用户信息失败');
      } finally {
        this.loading = false;
      }
    },
    
    // 更新用户信息
    async updateUserInfo() {
      this.updating = true;
      try {
        const updateData = {
          name: '示例用户',
          phone: '13800138000'
        };
        await userApi.updateUserInfo(updateData);
        this.$message.success('更新用户信息成功');
        // 重新获取用户信息
        await this.getUserInfo();
      } catch (error) {
        console.error('更新用户信息失败:', error);
        this.$message.error('更新用户信息失败');
      } finally {
        this.updating = false;
      }
    },
    
    // 获取消息列表
    async getMessages() {
      try {
        const response = await messageApi.getMessages({ page: 1, limit: 10 });
        this.messages = response.data;
      } catch (error) {
        console.error('获取消息列表失败:', error);
      }
    },
    
    // 上传文件示例
    async uploadFile() {
      this.uploading = true;
      try {
        // 创建一个示例文件
        const file = new File(['示例文件内容'], 'example.txt', { type: 'text/plain' });
        const response = await uploadApi.uploadFile(file, 'document');
        this.$message.success('文件上传成功');
        console.log('上传结果:', response);
      } catch (error) {
        console.error('文件上传失败:', error);
        this.$message.error('文件上传失败');
      } finally {
        this.uploading = false;
      }
    }
  }
};
</script>

<style scoped>
.api-example {
  max-width: 800px;
  margin: 20px auto;
}

.user-info {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.actions {
  margin-bottom: 20px;
}

.actions .el-button {
  margin-right: 10px;
}

.messages {
  margin-top: 20px;
}
</style> 